<!-- 管理 -->
<template>
  <div class="app-container">
    <!-- 列表 -->
    <el-col>
      <div v-if="isShowSearchBtn" class="search-container">
        <el-form ref="queryFormRef" :model="queryParams" :inline="true">
          <el-form-item label="关键字" prop="title">
            <el-input
              v-model="queryParams.title"
              placeholder="关键字"
              clearable
              style="width: 200px"
              @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item label="申请时间">
            <el-date-picker
              class="!w-[240px]"
              v-model="dateTimeRange"
              type="daterange"
              range-separator="~"
              start-placeholder="开始时间"
              end-placeholder="截止时间"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
          <el-form-item label="状态" prop="is_hid">
            <el-select
              v-model="queryParams.is_hid"
              placeholder="全部"
              clearable
              class="!w-[100px]"
            >
              <el-option label="待审批" value="0" />
              <el-option label="审批通过" value="1" />
              <el-option label="审批拒绝" value="2" />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="handleQuery"
              ><i-ep-search />搜索</el-button
            >
            <el-button @click="resetQuery">
              <i-ep-refresh />
              重置</el-button
            >
          </el-form-item>
        </el-form>
      </div>

      <el-card shadow="never" class="table-container">
        <template #header>
          <div class="flex justify-between">
            <div></div>
            <div>
              <el-button
                class="ml-3"
                @click="handleSearchShowBtn"
                icon="Search"
                circle
              />
              <el-button
                class="ml-3"
                title="刷新"
                @click="handleQuery"
                icon="Refresh"
                circle
              />
            </div>
          </div>
        </template>
        <el-table v-loading="loading" :data="pageData" style="width: 100%">
          <el-table-column prop="nickname" label="申请人" />
          <el-table-column prop="created_at" label="申请时间" />
          <el-table-column label="类型">
            <template #default="scope">
              {{ scope.row.flow_name + "-" + scope.row.type_name }}
            </template>
          </el-table-column>
          <el-table-column prop="org_name" label="所属部门" />
          <el-table-column prop="approved_by" label="当前审批人" />
          <el-table-column prop="status_d" label="审批状态">
            <template #default="scope">
              <el-tag
                :key="scope.row.id"
                :type="scope.row.status_color"
                effect="plain"
              >
                {{ scope.row.status_d }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button
                type="success"
                circle
                title="查看"
                @click="handleApproval(scope.row)"
                ><i-ep-Promotion
              /></el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-if="total > 0"
          v-model:total="total"
          v-model:page="queryParams.p"
          v-model:limit="queryParams.limit"
          @pagination="handleQuery"
        />
      </el-card>
    </el-col>
    <el-drawer v-model="drawer" title="事项审批" direction="rtl" size="65%">
      <el-descriptions class="margin-top" title="审批" :column="3" border>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <CollectionTag />
              </el-icon>
              事项名称
            </div>
          </template>
          {{ approvalData.title }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <user />
              </el-icon>
              申请人
            </div>
          </template>
          {{ approvalData.nickname }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <OfficeBuilding />
              </el-icon>
              所属部门
            </div>
          </template>
          {{ approvalData.org_name }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <Menu />
              </el-icon>
              类型
            </div>
          </template>
          <span v-if="approvalData.type_name">{{
            approvalData.flow_name + "-" + approvalData.type_name
          }}</span>
          <span v-else>{{ approvalData.flow_name }}</span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <Clock />
              </el-icon>
              时间
            </div>
          </template>
          {{ approvalData.start_time + " ~ " + approvalData.end_time }}
        </el-descriptions-item>
        <el-descriptions-item v-if="approvalData.address">
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <Location />
              </el-icon>
              地点
            </div>
          </template>
          {{ approvalData.address }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <Compass />
              </el-icon>
              审批状态
            </div>
          </template>
          <el-tag size="small">{{ approvalData.status_d }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item span="3">
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <Tickets />
              </el-icon>
              原由
            </div>
          </template>
          {{ approvalData.reason }}
        </el-descriptions-item>
        <el-descriptions-item
          v-for="(item, index) in approvalData.extra"
          :key="index"
        >
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <Tickets />
              </el-icon>
              {{ item.label }}
            </div>
          </template>
          {{ item.value }}
        </el-descriptions-item>
      </el-descriptions>
      <el-form
        ref="userFormRef"
        label-position="right"
        label-width="auto"
        mt-4
        :model="approvalData"
        v-if="approvalData.cc_status == 0"
      >
        <el-form-item label="查阅状态">
          <el-radio-group v-model="approvalData.status">
            <el-radio :value="0" border>未读</el-radio>
            <el-radio :value="1" border>已读</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="drawer = false">关闭</el-button>
          <el-button
            v-if="approvalData.cc_status == 0"
            type="primary"
            @click="handleSubmit"
            >确认</el-button
          >
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "ApprovalCopy",
  inheritAttrs: false,
});

import {
  getSendCopyPage,
  getOptions,
  approvalIsRead,
  getApprovalForm,
} from "@/api/sendCopy";
import {
  SendCopyQuery,
  SendCopyPage,
  SendCopyOptions,
} from "@/api/sendCopy/types";
const options = ref<SendCopyOptions[]>(); // 下拉数据源
const queryFormRef = ref(ElForm); // 查询表单
const userFormRef = ref(ElForm); // 表单
const isShowSearchBtn = ref(false);
const isShowForm = ref(false);
const loading = ref(false); //  加载状态
const drawer = ref(false);
const approvalData = reactive<SendCopyPage>({});
const removeIds = ref([]); // 删除ID集合 用于批量删除
const dateTimeRange = ref([]);
watch(dateTimeRange, (newVal) => {
  Object.assign(queryParams, { time: newVal });
});
const queryParams = reactive<SendCopyQuery>({
  p: 1,
  limit: 10,
});
const total = ref(0); // 数据总数
const pageData = ref<SendCopyPage[]>(); // 分页数据
const iconStyle = computed(() => {
  const marginMap = {
    large: "8px",
    default: "6px",
    small: "4px",
  };
  return {
    marginRight: marginMap.default,
  };
});

/** 查询 */
function handleQuery() {
  loading.value = true;
  getSendCopyPage(queryParams)
    .then(({ data }) => {
      pageData.value = data.items;
      total.value = data.total;
    })
    .finally(() => {
      loading.value = false;
    });
}

function handleApproval(row: any) {
  getApprovalForm(row.id).then(({ data }) => {
    Object.assign(approvalData, { ...data });
  });
  drawer.value = true;
}

async function loadOptions() {
  getOptions().then((response) => {
    options.value = response.data;
  });
}

/** 表单提交 */
const handleSubmit = useThrottleFn(() => {
  userFormRef.value.validate((valid: any) => {
    const loading = ElLoading.service({
      lock: true,
      text: "提交中...",
      background: "rgba(0, 0, 0, 0.7)",
    });
    if (valid) {
      approvalIsRead({
        id: approvalData.id,
        status: approvalData.status,
      })
        .then(() => {
          drawer.value = false;
          ElMessage.success("处理成功");
          restForm();
          loading.close();
        })
        .finally(() => loading.close());
    }
  });
}, 3000);

/** 重置查询 */
function resetQuery() {
  queryFormRef.value.resetFields();
  dateTimeRange.value = [];
  queryParams.p = 1;
  handleQuery();
}

//收起展开搜索按钮
function handleSearchShowBtn() {
  isShowSearchBtn.value = isShowSearchBtn.value === false;
}

onMounted(() => {
  handleQuery();
});
</script>
